<!--
 * @author  dumeng
 * @desc 调查问卷-统计
-->
<template>
  <div class="survey-statistics">
    <div class="main-buttons">
      <div class="main-buttons-title">
        <span>问卷统计</span>
        <el-tag v-if="detail.joinNum" size="medium" :hit="true">总参与人数：{{ detail.joinNum }}人</el-tag>
      </div>
      <div class="main-buttons-btns">
        <el-button style="margin-left: 10px" @click="()=>{$router.back()}">返回</el-button>
        <el-button style="margin-left: 10px" @click="handleExport">导出</el-button>
        <el-button style="margin-left: 10px" @click="handleExportDetail">导出明细</el-button>
      </div>
    </div>
    <div class="main-wrap">
      <el-row v-for="(item, index) in detail.question" :key="index">
        <el-col :span="24">
          <div class="question-info">
            <el-tag
              size="mini"
              :type="item.questionType === 'WJWTLX_01' ? 'danger' : item.questionType === 'WJWTLX_02' ? 'warning' : 'success'"
            >
              {{ item.questionType | filterType }}
            </el-tag>
            <span>{{ index + 1 }}. {{ item.stem }}({{ item.isMust === '1' ? '必填' : '非必填' }}）</span>
          </div>
        </el-col>
        <el-col
          v-if="(item.questionType === 'WJWTLX_01' || item.questionType === 'WJWTLX_02')"
          :span="24"
        >
          <el-table
            :data="item.tableData"
            border
            :summary-method="getSummaries"
            show-summary
            style="width: 100%"
          >
            <el-table-column width="400" label="选项">
              <template slot-scope="scope">
                <span>{{ scope.row.opts }}</span>
                <el-button v-if="scope.row.opts === '其他'" type="text" @click="seeAnswer(item)">【详细】</el-button>
              </template>
            </el-table-column>
            <el-table-column
              prop="selectNum"
              label="选择人数"
              width="120"
            />
            <el-table-column label="占参与人数比例">
              <template slot-scope="scope">
                <el-progress style="width: 300px;display: inline-block;" :percentage="Number(scope.row.progress) || 0" />
              </template>
            </el-table-column>
            <el-table-column label="占总人数比例" width="220">
              <template slot-scope="scope">
                <span>{{ scope.row.proportion }}%</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col v-else :span="24" class="tiankong">
          <el-col :span="8">
            查看回答
            <el-button type="text" @click="seeAnswer(item)">【详细】</el-button>
          </el-col>
          <el-col :span="4">
            本题参与人数总计：{{ item.tableData[0].selectNum }}
          </el-col>
          <el-col :span="8">
            占参与人数比例：
            <el-progress style="width: 200px;display: inline-block;" :percentage="Number(item.tableData[0].progress) || 0" />
          </el-col>
          <el-col :span="4">
            占总人数比例：{{ item.tableData[0].proportion }}%
          </el-col>
        </el-col>
      </el-row>
    </div>
    <answer-list v-if="showAnswer" :id="obj.id" :type="obj.questionType" @close="showAnswer = false" />
  </div>
</template>

<script>
import { statistics, exportFile, exportFileDetailNoMask, exportFileDetailMask } from '../api/index'
import AnswerList from '../components/AnswerList'
import { exportSign } from '@/utils/fileImportOrExportSign'
import { exportCheck } from '@/utils/sensitiveInfoExportCheck'
export default {
  name: 'SurveyStatistics',
  components: { AnswerList },
  filters: {
    filterType(t) {
      switch (t) {
        case 'WJWTLX_01':
          return '单选'
        case 'WJWTLX_02':
          return '多选'
        case 'WJWTLX_03':
          return '文本'
        case 'WJWTLX_04':
          return '图片'
        case 'WJWTLX_05':
          return '整数型填空'
        case 'WJWTLX_06':
          return '小数型填空'
        case 'WJWTLX_07':
          return '日期型填空'
      }
    }
  },
  data() {
    return {
      detail: {},
      showAnswer: false,
      obj: {}
    }
  },
  created() {
    if (this.$route.query.i) {
      this.getData()
    } else {
      this.$message({
        type: 'error',
        message: '参数异常，请重试!',
        onClose: () => {
          this.$router.back()
        }
      })
    }
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '本题参与人数总计'
          return
        }
        if (index === 1) {
          sums[index] = data.length > 1 ? data[0].selectedNum : ''
        }
      })

      return sums
    },
    seeAnswer(item) {
      this.obj = Object.assign({}, item)
      this.showAnswer = true
    },
    handleExport() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })

      const query = exportSign({
        id: this.$route.query.i
      }).obj
      exportFile(query).then((res) => {
        loading.close()
        const content = res.data
        const blob = new Blob([content])
        const fileName = '问卷统计.xlsx'
        if ('download' in document.createElement('a')) {
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else {
          navigator.msSaveBlob(blob, fileName)
        }
      }).catch(() => {
        // this.$message.error()
        loading.close()
      })
    },
    handleExportDetail() {
      // const loading = this.$loading({
      //   lock: true,
      //   text: '请稍后',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.3)'
      // })

      const query = exportSign({
        id: this.$route.query.i
      }).obj

      exportCheck('STAFF_SERVICE_QUESTIONNAIRE', this.$route.query.i, exportFileDetailMask, exportFileDetailNoMask, query, '导出明细.xlsx')
      return
      // exportFileDetail(query).then((res) => {
      //   loading.close()
      //   const content = res.data
      //   const blob = new Blob([content])
      //   const fileName = '导出明细.xlsx'
      //   if ('download' in document.createElement('a')) {
      //     const elink = document.createElement('a')
      //     elink.download = fileName
      //     elink.style.display = 'none'
      //     elink.href = URL.createObjectURL(blob)
      //     document.body.appendChild(elink)
      //     elink.click()
      //     URL.revokeObjectURL(elink.href) // 释放URL 对象
      //     document.body.removeChild(elink)
      //   } else {
      //     navigator.msSaveBlob(blob, fileName)
      //   }
      // }).catch(() => {
      //   // this.$message.error()
      //   loading.close()
      // })
    },
    getData() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.1)'
      })
      return new Promise((resolve, reject) => {
        statistics({ id: this.$route.query.i }).then(res => {
          this.detail = res.data.data
          loading.close()
        }).catch(err => {
          loading.close()
          reject(err)
        })
      })
    }
  }
}
</script>

<style lang="scss">
  .survey-statistics {
    padding: 0 30px;
    .main-buttons {
      display: flex;
      line-height: 36px;
      margin: 10px 0;
      .main-buttons-title {
        flex: 1;
        height: 36px;
        line-height: 36px;
        font-size: 16px;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
      }
    }
    .main-wrap {
      min-height: calc(100vh - 130px);
      max-height: calc(100vh - 130px);
      background-color: #fff;
      overflow-y: auto;
      padding: 0 30px;
      padding-bottom: 40px;
      .question-info {
        margin: 20px 0;
      }
      .el-table--border {
        border-left: 1px solid #ebeef5 !important;
        border-top: 1px solid #ebeef5 !important;
        border-bottom: 1px solid #ebeef5 !important;
      }
      .el-table--border td, .el-table--border th {
        border-right: 1px solid #ebeef5 !important;
      }
      .tiankong {
        width: 100%;
        background-color: #F6F9FD;
        border: 1px solid #DEE3E7;
        height: 40px;
        font-size: 14px;
        &>div {
          line-height: 40px;
          color: #333;
          padding-left: 20px;
        }
        .el-col {
          position: relative;
          &:last-child:after{
            display: none;
          }
          &:after {
            content: '';
            display: inline-block;
            height: 100%;
            width: 1px;
            background-color: #DEE3E7;
            position: absolute;
            right: 0;
            top: -1px;
          }
        }
      }
      .el-progress-bar{
        width: 95%;
      }
      .el-button{
        padding-top: 0;
        padding-bottom: 0;
      }
    }
  }
</style>
